<template>
    <div>
        <el-dialog title="选择动态词包" :visible.sync="SeletCytitle" width="900px" class="target-main" center
            @close="$emit('update:Cytitleshow', false)" :Cytitleshow="Cytitleshow">
            <el-table :data="wordpackData" height="400" border :header-cell-style="{'text-align':'center','background':'#f7f7f7','color':'#666'}" style="width: 100%;font-size: 13px;">
                <el-table-column prop="name" align="center" label="词包" width="100">
                </el-table-column>
                <el-table-column prop="default_word" align="center" label="默认词" width="100">
                </el-table-column>
                <el-table-column label="替换词">
                    <template slot-scope="scope">
                        <div :class="{'substitute-close':scope.row.isChoose != true,'substitute-open':scope.row.isChoose == true}" >{{scope.row.words.join(',')}}</div>
                            <span v-if="scope.row.foldshow == true" @click="closefold(scope.$index, scope.row)" class="subword">收起</span>
                            <span v-if="scope.row.foldshow != true" @click="openfold(scope.$index, scope.row)" class="subword">展开</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="80">
                    <template slot-scope="scope">
                        <el-button @click="insertWord(scope.row)" type="text">插入</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<style>
.substitute-close {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    display: inline-block;
}
.substitute-open {
    overflow-y: auto;
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
    margin-top: 8px;
    max-height: 80px;
}
.subword{
    float: right;
    cursor: pointer;
    color: #409EFF;
}
</style>
<script>
    export default {
        name: 'CytitlePicker',
        props: {
            Cytitleshow: {
                type: Boolean,
                default: false
            },
            creativeword: {
                type: Array,
                default: () => {
                  return []
                 },
            }
        },
        data() {
            return {
                SeletCytitle: this.Cytitleshow,
                wordpackData:[
                ]
            }
        },
        watch: {
            Cytitleshow() {
                this.SeletCytitle = this.Cytitleshow;
            },
            creativeword: {
                immediate: true, // 很重要！！！
                handler() {
                  this.wordpackData = this.creativeword
                }
            }
        },
        methods: {
            closefold(index,row) {
                console.log(index, row)
                this.$set(this.wordpackData[index], 'foldshow', false)
                this.$set(this.wordpackData[index], 'isChoose', true)
            },
            openfold(index,row) {
                console.log(index, row)
                this.$set(this.wordpackData[index], 'foldshow', true)
                this.$set(this.wordpackData[index], 'isChoose', false)
            },
            insertWord(item) {
                console.log(item)
                this.$emit('select', item, -1)
              //  this.$emit('update:Cytitleshow', false)
            }
        }
    }
</script>
